// 1 获取元素
var box = document.querySelector(".box");
var timer = null; // 预留定时器
// 2 渲染奖项
box.innerHTML = data.map(function(itemObj , i){
    return  i === 4 ? `<button class="btn">
                        <h4>${itemObj.tit}</h4>
                        <p>${itemObj.des}</p>
                    </button>` : `<div class="item">
                                        <img src="${itemObj.src}" alt="">
                                        <p>${itemObj.des}</p>
                                    </div>`
}).join("")

// 3 获取抽奖按钮 和 奖项
var btn = document.querySelector(".btn");
var items = [...document.querySelectorAll(".item")];

// 4 给按钮绑定点击事件
btn.onclick = function(){
    // 按钮禁用 且标识状态
    btn.disabled = true;
    btn.classList.add("grey")
    timer = setInterval(function(){
        // 排他
        var checked = document.querySelector(".checked");
        checked && checked.classList.remove("checked") // ??
        // 添加定时器 按照指定的时间
        // 再所有奖项items中随机生成一个下标 找到奖项高亮
        var itemI = Math.floor(Math.random() * items.length);  // 2  5
        items[itemI].classList.add("checked") // 
    } , 100)

    // 超时调用 超过3-8s后停止抽奖
    setTimeout(function(){
        // 清除定时器
        clearInterval(timer)
        // 获取当前选中的奖项的内容  即 再页面中获取有 checked 类的元素
        var checked = document.querySelector(".checked")
        // 创建一个div 展示一个遮罩 即 显示当前抽中的奖项的详情
        var div = document.createElement("div");
        console.log(checked.innerHTML)
        div.className = "mark"
        div.innerHTML = `
            <div class="con">
                <h5>恭喜您:</h5>
                ${checked.innerHTML}
                <div class="ok">确定</div>
            </div>
        `
        document.body.appendChild(div)
        // 获取动态创建确定 绑定点击事件
        var ok = document.querySelector(".ok")
        ok.onclick = function(){
            div.remove()
            // 抽奖按钮可用  恢复可用状态
            btn.disabled = false;
            btn.classList.remove("grey")
        }

        

    } , Math.floor(Math.random() * (8 - 3 + 1) + 3) * 1000)
}